﻿@model ProductAttributeOptionModel

<div asp-validation-summary="ModelOnly"></div>
<input type="hidden" asp-for="Id" />
<input type="hidden" asp-for="ProductVariantAttributeId" />
<input type="hidden" asp-for="ProductAttributeOptionsSetId" />
<input type="hidden" asp-for="IsListTypeAttribute" />

<div class="adminContent mb-3">
    <div class="adminRow">
        <div class="adminTitle">
            <smart-label asp-for="ValueTypeId" />
        </div>
        <div class="adminData">
            <select asp-for="ValueTypeId" asp-items="((ProductVariantAttributeValueType)Model.ValueTypeId).ToSelectList()"></select>
            <span asp-validation-for="ValueTypeId"></span>
        </div>
    </div>
    <div class="adminRow" id="group-linked-product">
        <div class="adminTitle">
            <smart-label asp-for="LinkedProductId" />
        </div>
        <div class="adminData">
            <input type="hidden" asp-for="LinkedProductId" />

            <div class="input-group">
                <input type="text" class="form-control" id="linked-product-name" placeholder="@T("Common.Unspecified")" value="@Model.LinkedProductName" readonly />
                <div class="input-group-append">
                    <button type="button" class="btn btn-outline-secondary btn-to-danger btn-remove-product-linkage">
                        <i class="fa fa-times"></i>
                        <span>@T("Admin.Catalog.Products.ProductVariantAttributes.Attributes.Values.UnlinkProduct")</span>
                    </button>
                    <entity-picker asp-for="LinkedProductId"
                                   icon-css-class="fa fa-link"
                                   max-items="1"
                                   append-mode="false"
                                   disabled-entity-ids="new[] { Model.ProductId }"
                                   dialog-title="@T("Admin.Catalog.Products.ProductVariantAttributes.Attributes.Values.Fields.LinkedProduct.AddNew").Value"
                                   caption="@T("Admin.Catalog.Products.ProductVariantAttributes.Attributes.Values.LinkProduct").Value"
                                   onselectioncompleted="PickLinkedProduct_Completed"
                                   class="btn btn-outline-secondary btn-add-product-linkage" />
                </div>
            </div>

            <span asp-validation-for="LinkedProductId"></span>
        </div>
    </div>
    <div class="adminRow" id="group-quantity">
        <div class="adminTitle">
            <smart-label asp-for="Quantity" />
        </div>
        <div class="adminData">
            <editor asp-for="Quantity" />
            <span asp-validation-for="Quantity"></span>
        </div>
    </div>
</div>

@(Html.LocalizedEditor<ProductAttributeOptionModel, ProductAttributeOptionLocalizedModel>("product-attribute-option-localized",
    @<text>
        <div class="adminContent">
            <div class="adminRow">
                <div class="adminTitle">
                    <smart-label asp-for="Locales[item].Name" />
                </div>
                <div class="adminData">
                    @*IMPORTANT: Do not delete, this hidden element contains the id to assign localized values to the corresponding language *@
                    <input type="hidden" asp-for="Locales[item].LanguageId" />
                    <input asp-for="Locales[item].Name" />
                    <span asp-validation-for="Locales[item].Name"></span>
                </div>
            </div>
            <div class="adminRow">
                <div class="adminTitle">
                    <smart-label asp-for="Locales[item].Alias" />
                </div>
                <div class="adminData">
                    <input asp-for="Locales[item].Alias" />
                    <span asp-validation-for="Locales[item].Alias"></span>
                </div>
            </div>
        </div>
    </text>,
    @<text>
        <div class="adminContent">
            <div class="adminRow">
                <div class="adminTitle">
                    <smart-label asp-for="Name" />
                </div>
                <div class="adminData">
                    <input asp-for="Name" />
                    <span asp-validation-for="Name"></span>
                </div>
            </div>
            <div class="adminRow">
                <div class="adminTitle">
                    <smart-label asp-for="Alias" />
                </div>
                <div class="adminData">
                    <input asp-for="Alias" />
                    <span asp-validation-for="Alias"></span>
                </div>
            </div>
        </div>
    </text>
))

<div class="adminContent">
    @if (Model.IsListTypeAttribute)
    {
        <div class="adminRow">
            <div class="adminTitle">
                <smart-label asp-for="PictureId" />
            </div>
            <div class="adminData">
                <editor asp-for="PictureId" />
                <span asp-validation-for="PictureId"></span>
            </div>
        </div>
        <div class="adminRow">
            <div class="adminTitle">
                <smart-label asp-for="Color" />
            </div>
            <div class="adminData">
                <editor asp-for="Color" />
                <span asp-validation-for="Color"></span>
            </div>
        </div>
    }
    <div class="adminRow" id="group-price-adjustment">
        <div class="adminTitle">
            <smart-label asp-for="PriceAdjustment" />
        </div>
        <div class="adminData">
            <editor asp-for="PriceAdjustment" />
            <span asp-validation-for="PriceAdjustment"></span>
        </div>
    </div>
    <div class="adminRow" id="group-weight-adjustment">
        <div class="adminTitle">
            <smart-label asp-for="WeightAdjustment" />
        </div>
        <div class="adminData">
            <editor asp-for="WeightAdjustment" />
            <span asp-validation-for="WeightAdjustment"></span>
        </div>
    </div>
    <div class="adminRow">
        <div class="adminTitle">
            <smart-label asp-for="IsPreSelected" />
        </div>
        <div class="adminData">
            <input asp-for="IsPreSelected" />
            <span asp-validation-for="IsPreSelected"></span>
        </div>
    </div>
    <div class="adminRow">
        <div class="adminTitle">
            <smart-label asp-for="DisplayOrder" />
        </div>
        <div class="adminData">
            <editor asp-for="DisplayOrder" />
            <span asp-validation-for="DisplayOrder"></span>
        </div>
    </div>
</div>

<script sm-target-zone="scripts" data-origin="attribute-option-edit">
    $(function() {
        $("#@Html.IdFor(model => model.ValueTypeId)").on('change', function() {
			var selectedValueTypeId = $('#@Html.IdFor(model => model.ValueTypeId)').val();

			if (selectedValueTypeId == '@((int)ProductVariantAttributeValueType.Simple)') {
				$('#group-linked-product').hide();
				$('#group-quantity').hide();
				$('#group-price-adjustment').show();
				$('#group-weight-adjustment').show();
			}
			else if (selectedValueTypeId == '@((int)ProductVariantAttributeValueType.ProductLinkage)') {
				$('#group-linked-product').show();
				$('#group-quantity').show();
				$('#group-price-adjustment').hide();
				$('#group-weight-adjustment').hide();
			}
        }).trigger('change');

        $('.btn-remove-product-linkage').on('click', function () {
			$('#linked-product-name').val('');
			$('#@Html.IdFor(model => model.LinkedProductId)').val('0');
            toggleLinkageButtons();
		});

        toggleLinkageButtons();

	    function toggleLinkageButtons() {
		    var unlinked = ($('#@Html.IdFor(model => model.LinkedProductId)').val() === '0');
            $('.btn-add-product-linkage').toggle(unlinked);
            $('.btn-remove-product-linkage').toggle(!unlinked);
	    }
    });

	function PickLinkedProduct_Completed(ids, selectedItems, dialog) {
		$('#linked-product-name').val(selectedItems[0].name);
		return true;
	}
</script>